<!-- 本月目标 -->
<template>
  <el-card :header="title">
    <template #extra>
      <more-icon @command="onCommand" />
    </template>
    <div>
      <div class="accumulatedSitesBg">
        <div class="padding30">
          <div class="accumulatedSites flex-between">
            <!-- <span class="iconfont icon-dingdan"></span> -->
            <span>累计站点</span>
            <!-- <el-button plain
                       v-if="sign == '1'"
                       @click="upLoadZip">下载总包(后台/公众号)</el-button> -->
          </div>
          <vue-count-up class="sitesNum"
                        :end-val="siteNumObject.siteTotal ? siteNumObject.siteTotal : '0'" />
        </div>
      </div>
      <!-- 四宫格 -->
      <div class="fourPalaceGrid">
        <div class="singlePalaceGrid">
          <div>
            <img class="icon"
                 src="../../../assets/Group 3126.png"
                 alt="" />
          </div>
          <div class="accumulateNum">
            <vue-count-up class="Num"
                          :end-val="siteNumObject.userTotal ? siteNumObject.userTotal : '0'" />
            <div>用户数量(个)</div>
          </div>
        </div>
        <div class="singlePalaceGrid">
          <div>
            <img class="icon"
                 src="../../../assets/Group 3128.png"
                 alt="" />
          </div>
          <div class="accumulateNum">
            <vue-count-up class="Num"
                          :end-val="
                siteNumObject.orderTotal ? siteNumObject.orderTotal : '0'
              " />
            <div>订单数量(个)</div>
          </div>
        </div>
        <div class="singlePalaceGrid">
          <div>
            <img class="icon"
                 src="../../../assets/Group 2984.png"
                 alt="" />
          </div>
          <div class="accumulateNum">
            <vue-count-up class="Num"
                          :options="countUpOptions"
                          :end-val="
                siteNumObject.discountedPriceTotal
                  ? siteNumObject.discountedPriceTotal
                  : '0'
              " />
            <!-- <div class="Num">{{ siteNumObject.disbursementsTotal?siteNumObject.disbursementsTotal:'0' }}</div> -->
            <div> 累计充值(元) </div>
          </div>
        </div>
        <div class="singlePalaceGrid">
          <div>
            <img class="icon"
                 src="../../../assets/Group 3127.png"
                 alt="" />
          </div>
          <div class="accumulateNum">
            <vue-count-up class="Num"
                          :options="countUpOptions"
                          :end-val="
                siteNumObject.disbursementsTotal
                  ? siteNumObject.disbursementsTotal
                  : '0'
              " />
            <div>累计消费(元) </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {
  platformConfigDetail,
  platformSettingsModify
} from '@/api/platformSettings/index';
import {
  updateVersionApi,
  selectRenewInfo,
  fileDownload
} from '@/api/updateVersion/index';
import { siteStatistics } from '@/api/mainPlatform/index';
import VueCountUp from 'vue-countup-v2';
export default {
  //   const emit = defineEmits(['command']);
  name: 'analysis',
  props: {
    title: String
  },
  components: {
    VueCountUp
  },
  data () {
    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        decimalPlaces: 2,
        prefix: '',
        suffix: ''
      },
      siteNumObject: '',
      // 当前版本
      currentVersion: '',
      //   最新版本
      latestVersion: '',
      //   标记
      sign: '',
      //   当前标记信息
      signMsg: '',
      latestVersionBoolen: true,
      //   到期时间
      endDate: '',
      loading: false,
      form: {
        // 取平台的appid
        appid: '',
        // 取平台的域名
        realmName: '',

        softwareIdentifying: 'wjyk_massage',
        updateFlag: '1'
      },
      params: {
        softwareIdentifying: 'wjyk_massage',
        page: 1,
        limit: 10
      },
      //   当前总数
      total: null,
      //
      //   更新列表
      upDataList: [],
      //   日记更新列表
      logList: [],
      pcGzhUrl: '',
      versionUrl: ''
    };
  },
  activated () {
    this.siteNumFn();
    // this.init();
  },
  methods: {
    /* 提交 */
    async siteNumFn () {
      const res = await siteStatistics();
      console.log(res);
      this.siteNumObject = res;
    },
    onCommand (command) {
      console.log(command);
      emit('command', command);
    },
    async init () {
      const res = await platformConfigDetail();
      this.form.appid = res.appid;
      this.currentVersion = res.versionNumber;
      this.form.realmName = res.realmName;

      //   更新列表
      //   const upDataList = await selectRenewInfo(this.params);
      //   console.log(upDataList.empowerrenewMap);
      //   this.total = upDataList.empowerrenewMap.total;
      //   this.logList = upDataList.empowerrenewMap.rows;

      //查询是否具备更新能力
      const updateVersion = await updateVersionApi({
        updateFlag: 4
      });
      console.log(updateVersion);
      this.latestVersion = updateVersion.versionNumber;
      this.sign = updateVersion.sign;
      this.endDate = updateVersion.endDate;
      //   this.pcGzhUrl = updateVersion.pcGzh;
      this.versionUrl = updateVersion.projectPackageName;
      if (this.sign == '0') {
        this.signMsg = '未在站点授权，不支持更新版本';
      } else if (this.sign == '2') {
        this.signMsg = '授权已到期，不支持更新版本';
      } else if (this.sign == '3') {
        this.signMsg = '软件名称有误';
      } else if (this.sign == '4') {
        this.signMsg = '版本更新失败';
      }
      // 当前版本和最近版本 如果当前版本和最近版本一样那么不需要更新
      if (this.currentVersion == this.latestVersion) {
        this.latestVersionBoolen = false;
        this.signMsg = '您已经是最新版了';
      }
    },
    upLoadZip () {
      window.open(this.versionUrl, '_self');
    }
  }
};
</script>

<style lang="less" scoped>
.fourPalaceGrid {
  display: flex;
  flex-wrap: wrap;
  .singlePalaceGrid {
    flex: 50%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

    height: 93px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 28px;
    border: 1px solid #f5f6fb;
    .accumulateNum {
      margin-left: 8px;
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .Num {
        color: #1e6ceb;
        font-size: 20px;
      }
    }
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}

:deep(.el-card__body) {
  padding: 0;
}
.accumulatedSitesBg {
  background-image: url('/src/assets/images/Rectangle 2056.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 128px;

  .padding30 {
    padding: 17px 17px 0 20px;
    .sitesNum {
      color: #fff;
      font-size: 30px;
      font-weight: 400;
    }
    .accumulatedSites {
      color: #fff;
    }
  }
}
.workplace-goal {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  .workplace-goal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    margin: -48px 0 0 -90px;
    text-align: center;
  }
}
</style>
